<!--
import { setTimeout } from 'timers';
import { setTimeout } from 'timers';
 * @Description: 组织弹层
 * @Autor: wangwangwang
 * @Date: 2021-01-16 15:48:58
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-19 11:36:10
-->
<template>
	<el-dialog v-dialogDrag :visible.sync="visible" width="680px" :close-on-click-modal="false" :before-close="handleClose">
		<span slot="title" class="dialog-title">{{title || '选择数据'}}</span>
		<div v-loading="TreeLoading">
			<div style="height:600px;overflow: auto;">
				<el-input v-model="filterText" placeholder="输入关键字进行过滤">
				</el-input>
				<el-tree ref="tree" class="tree-line"  :indent="0"  :data="dataSource" show-checkbox node-key="id" highlight-current :props="defaultProps" :filter-node-method="filterNode" check-strictly @check-change="handleClick">
					<span slot-scope="{ node,data}" class="custom-tree-node">
						<span v-if="showArr" :style="showArr.indexOf(data.id)!==-1?'color:'+bg_color:''">{{ node.label }}</span>
						<span v-else>{{ node.label }}</span>
					</span>
				</el-tree>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button class="bottom_all_two" @click="handleClose">关 闭</el-button>
			<el-button class="bottom_all" @click="handleSure">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
import styles from '@/app.scss';
export default {
	data() {
		return {
			bg_color: styles.bg_color,
			filterText: '',
			defaultProps: {
				children: 'children',
				label: 'name'
			}
		};
	},
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val);
		},
		visible(val) {
			if (val && this.default) {
				setTimeout(() => {
					this.$refs.tree.setCheckedKeys([this.default]);
				}, 100)
			}
		}
	},
	props: ["visible", 'dataSource', 'title', 'default', 'TreeLoading', 'showArr'],
	methods: {
		handleClick(data, checked) {
			if (checked) {
				this.$refs.tree.setCheckedNodes([data]);
			}
		},
		filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
		handleSure() {
			let checkedData = this.$refs.tree.getCheckedNodes();
			if (checkedData.length > 1) {
				checkedData = [checkedData[checkedData.length - 1]]
			}
			console.log(JSON.parse(JSON.stringify(checkedData)))
			if (!checkedData.length) {
				this.$message.warning('请选中一条数据')
				return
			}
			this.$emit('handleSure', checkedData);
		},
		handleClose() {
			this.$emit('handleClose');
		}
	}
}
</script>

<style>
</style>